<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>寻健康达人，为山东鼓劲</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />    
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="css/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="css/weui.min.css" />
    <script type="text/javascript" src="js/mui.min.js"></script>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/common.js"></script>   		<script type="text/javascript" src="js/constants.js"></script>   
    <script type="text/javascript">
    mui.init({
      gestureConfig:{
        hold:true,
        release:true
      }
    });
    mui.ready(function(){
      mui(".mui-scroll-wrapper").scroll();
      mui(".mui-scroll-wrapper")[0].addEventListener('hold', function(){
        swiper.noSwiping = true;
      });
      mui(".mui-scroll-wrapper")[0].addEventListener('release', function(){
        swiper.noSwiping = false;
      });            /*添加文章点击监听*/     mui("#cities-wrapper").on('tap', 'a' ,function(event){     		var name = this.innerText;     		console.log("name = "+name);     		showFoodOrderWrapper(name);     });
    });
    // key of lastCode that stored in cookie
    var COOCKIE_KEY_LAST_CODE = 'lastCode';
    // the object to store userInfo
    var userInfoObj = null;
    
    var redirectToOauth = function () {
//    location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8be05afa2161d315&redirect_uri=http://www.imdcfz.com&response_type=code&scope=snsapi_userinfo&state=success#wechat_redirect';
    };
    
    (function () {
      // check if url contain code
      var search = location.search;
      search && search.length && (search = search.substring(1));
      var code = null;
      var params = search.split('&');
      params.forEach(function (param) {
        var keyVal = param.split('=');
        if (!keyVal || !keyVal.length) return;
        if (keyVal[0].toLowerCase() == 'code') {
          code = keyVal.length == 1 ? '' : keyVal[1];
        }
      });
      if (!!code) {
        // found code
        // if the code has used before, redirect
        var codeCookies = utils.getCookies(COOCKIE_KEY_LAST_CODE);
        if (codeCookies && codeCookies.length) {
          if (code == codeCookies[0]) {
            // has used before
            redirectToOauth();
            return;
          } else {
            // update the lastCode
            utils.deleteCookie(COOCKIE_KEY_LAST_CODE);
            utils.setCookie(COOCKIE_KEY_LAST_CODE, code, 30);
          }
        } else {
         // no history code found, update the lastCode
          utils.deleteCookie(COOCKIE_KEY_LAST_CODE);
          utils.setCookie(COOCKIE_KEY_LAST_CODE, code, 30);
        }
        // else, is a new code, try to get userinfo
        $.ajax({
          method: 'get',
          url: 'userinfo',
          data: { code: code },
          success: function (data) {
            try {
              var dataObj = JSON.parse(data);
              if (dataObj.code == 0) {
                // success get user info
              var bodyObj = dataObj.body;
                userInfoObj = {};
                Object.keys(bodyObj).forEach(function (key) {
                  userInfoObj[key] = bodyObj[key];
                });
              } else {
                if (dataObj.body && dataObj.body.errcode && dataObj.body.errcode == 40029) {
                  // if invalid code, redirect
                  redirectToOauth();
                } else {
                  errToast($('#err-toast'), $('#err-toast-content'), dataObj.msg);
                }
              }
            } catch (e) {
              errToast($('#err-toast'), $('#err-toast-content'), JSON.stringify(e));
            }
          },
          error: function (data, textStatus) {
            errToast($('#err-toast'), $('#err-toast-content'), textStatus || data.statusText);
          }
        });
        
     // get config for wechat js api
        $.ajax({
          type: 'get',
          url: 'config',
          data: { url: location.href ? location.href.split('#')[0] : '' },
          success: function (data) {
            try {
              var dataObj = JSON.parse(data);
              if (dataObj.code == 0 && dataObj.body) {
                var dataBody = dataObj.body;
                wx.config({
                  debug: false,
                  appId: dataBody.appId,
                  timestamp: dataBody.timestamp,
                  nonceStr: dataBody.nonceStr,
                  signature: dataBody.signature,
                  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
                });
                $('#info-share-button') && $('#info-share-button').click(function () {
                  showShareWrapper();
                });
              } else {
                errToast($('#err-toast'), $('#err-toast-content'), dataObj.msg);
              }
            } catch (e) {
              errToast($('#err-toast'), $('#err-toast-content'), JSON.stringify(e));
            }
          },
          error: function (data, textStatus) {
            errToast($('#err-toast'), $('#err-toast-content'), textStatus || data.statusText);
          }
        });
      } else {
        // no code found, redirect to authorize page
        redirectToOauth();
      }
    })();
    
    wx.ready(function () {
      wx.onMenuShareTimeline({
        title: '寻健康达人 为山东鼓劲',
        desc: '寻健康达人，为山东鼓劲',
        link: 'http://www.imdcfz.com',       
        imgUrl: 'http://www.imdcfz.com/img/lucky-share-default.png',
        cancel: function () {
          errToast($('#err-toast'), $('#err-toast-content'), '取消分享');
        },
        fail: function () {
          errToast($('#err-toast'), $('#err-toast-content'), '分享失败');
        },
        trigger: function () {
          //$('#share-wrapper').hide();
        }
      });
      
      wx.onMenuShareAppMessage({
        title: '寻健康达人 为山东鼓劲',
        desc: '寻健康达人，为山东鼓劲',
        link: 'http://www.imdcfz.com',       
        imgUrl: 'http://www.imdcfz.com/img/lucky-share-default.png',
        cancel: function () { 
          errToast($('#err-toast'), $('#err-toast-content'), '取消分享');
        },
        fail: function () {
          errToast($('#err-toast'), $('#err-toast-content'), '分享失败');
        },
        trigger: function () {
          //$('#share-wrapper').hide();
        }
      });
    });

    var initIndex = function () {
      init();
      initCodeBtnStatus(document.getElementById('send-code-btn'));
      initCitiesScroll();
      ajaxGet(1);
    };
    </script>
  </head>

  <body onload="initIndex()">
    <div class='off rotate' id='audio_btn' style='display:block;' onclick="playorPause()">
      <audio id='media' src="http://www.imdcfz.com/sound/bgsound.mp3" preload=""
      autoplay="" loop=""></audio>
    </div>
    <marquee class="gonggao">公告：因近期遭到不法黑客攻击，导致数据丢失，后期我们将加强数据管理，保证参与者的权益。给您带来的不便我们深表歉意。</marquee>
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" id="load-wrapper">
          <div id="load-hello"><img src="img/load-hello.png" onload="loadedPageOneImg()" onerror="loadPageOneImgError()"/></div>
          <div id="load-rice"><img src="img/load-rice.png" onload="loadedPageOneImg()" onerror="loadPageOneImgError()"></div>
          <div id="load-arm-rice"><img src="img/load-arm-rice.png" onload="loadedPageOneImg()" onerror="loadPageOneImgError()"></div>
          <div id="load-arm"><img src="img/load-arm.png" onload="loadedPageOneImg()" onerror="loadPageOneImgError()"></div>
          <div id="load-wine"></div>
          <div id="load-wine-surface-wrapper"><canvas id="load-wine-surface"></canvas></div>
          <div id="load-bottle"><img src="img/load-bottle.png" onload="loadedPageOneImg()" onerror="loadPageOneImgError()"/></div>
          <div id="load-bag"><img src="img/load-bag.png" onload="loadedPageOneImg()" onerror="loadPageOneImgError()"/></div>
          <div id="load-progress">&nbsp;&nbsp;&nbsp;0%</div>
        </div>
        <div class="swiper-slide result" id="result-2">
          <div id="index-intro-head"></div>
          <div id="index-intro-head-people"></div>
          <div id="index-intro-head-msg-one"></div>
          <div id="index-intro-head-msg-two"></div>
          <div id="index-intro-foot"></div>
          <div id="index-intro-foot-btn"></div>
        </div>
        <div class="swiper-slide result" id="result-3">
          <div id="index-lucky-intro-foot"></div>

          <div id="pg2-1"></div>
          <div id="pg2-2"></div>
          <div id="pg2-3"></div>
          <div id="pg2-r1"></div>
          <div id="pg2-r2"></div>
          <div id="pg2-r3"></div>
          <div id="pg2-r4"></div>
          <div id="pg2-r5"></div>
          <div id="pg2-r6"></div>
          <div id="pg2-r7"></div>
          <div id="pg2-r8"></div>
          <div id="pg2-r9"></div>
          <div id="pg2-xj"></div>
          <div id="pg2-xjhg"></div>
          <div id="pg2-zb"></div>
          <div id="index-lucky-intro-angle"></div>
        </div>
        <div class="swiper-slide result" id="result-4">
          <div id="pg3-hb"></div>
          <div id="pg3-bm"></div>
          <div id="pg3-xm"></div>
          <div id="pg3-en"></div>
          <div id="index-blackboard-people"></div>
          <div id="register-wrapper" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.4s" swiper-animate-delay="0.4s">
            <div id="register-form-wrapper">
              <form id="register-form">
                <div id="register-form-info-wrapper">
                  <div class="form-block">
                    <label class="form-label" id="form-label-name">姓名</label>
                    <input id="register-name" class="register-text" maxlength="4"/>
                  </div>
                  <div class="form-block">
                    <label class="form-label" id="form-label-tel">电话</label>
                    <input id="register-tel" class="register-text" maxlength="11"/>
                  </div>
                  <div class="form-block">
                    <label class="form-label" id="form-label-code"><input type="button" class="btn" id="send-code-btn" onclick="sendCode(this)" value="点击获取报名验证码"/></label>
                    <input id="register-code" class="register-text" maxlength="4"/>
                  </div>
                  <div class="form-block">
                    <label class="form-label" id="form-label-tag">健康标签</label>
                    <select id="register-tag" class="register-text">
                      <option value="0">长跑牛人</option>
                      <option value="1">健身大咖</option>
                      <option value="2">瑜伽狂人</option>
                      <option value="3">游泳飞鱼</option>
                      <option value="4">打球高手</option>
                      <option value="5">K歌之王</option>
                      <option value="6">素食主义</option>
                      <option value="7">养生控</option>
                      <option value="8">乐天派</option>
                      <option value="9">开心果</option>
                    </select>
                  </div>
                </div>
                <div id="register-form-submit-wrapper">
                  <a class="btn" onclick="register()">点击提交，立刻抽奖</a>
                </div>
              </form>
            </div>
          </div>
        </div>
        <!-- 健康达人 -->
        <div class="swiper-slide result" id="result-8">
          <div id="rank-top-wrapper">
            <div id="rank-title-wrapper">
              <div class="rank-btns-wrapper">
                <a class="btn active">健康达人</a>
                <a class="btn" onclick="jumpToSwipe(5)">齐鲁美食</a>
                <a class="btn" onclick="jumpToSwipe(6)">活动说明</a>
               </div>
            </div>
            <!-- 可滚动区域 -->
            <div id="rank-wrapper" class='mui-scroll-wrapper swiper-no-swiping'>
              <div class = 'mui-scroll'>
                <div class="query-rank-wrapper"><input id="query-rank-input" /><a class="btn" id="query-rank-btn" onclick="ajaxGet(1)"></a></div>
                <div id="rank-result-wrapper"></div>
                <div id="rank-result-pagination"></div>
              </div>
            </div>
            <div id="load-rank-wrapper">
              <div class="load-rank-inner">
                <img src="img/loading.png" class="load-rank-icon"/>
                <p>加载中...</p>
              </div>
            </div>
          </div>
          <div id="rank-foot-wrapper"></div>
        </div>
        <!-- 齐鲁美食 -->
        <div class="swiper-slide result" id="result-9">
          <div id="food-title-wrapper">
            <div class="rank-btns-wrapper">
              <a class="btn" onclick="jumpToSwipe(4)">健康达人</a>
              <a class="btn active">齐鲁美食</a>
              <a class="btn" onclick="jumpToSwipe(6)">活动说明</a>
             </div>
          </div>
          <div id="cities-wrapper">
            <div id="cities-inner">
              <div class="prompt-area"><span>点击下方城市名称，寻找齐鲁美食</span></div>
              <a class="btn">济南</a>
              <a class="btn">青岛</a>
              <a class="btn">菏泽</a>
              <a class="btn">临沂</a>
              <a class="btn">济宁</a>
              <a class="btn">烟台</a>
              <a class="btn">潍坊</a>
              <a class="btn">滨州</a>
              <a class="btn">淄博</a>
              <a class="btn">德州</a>
              <a class="btn">聊城</a>
              <a class="btn">东营</a>
              <a class="btn">泰安</a>
              <a class="btn">威海</a>
              <a class="btn">日照</a>
              <a class="btn">枣庄</a>
              <a class="btn">新泰</a>
              <a class="btn">莱芜</a>
              <a class="btn">海阳</a>
              <a class="btn">荣成</a>
              <a class="btn">博兴</a>
              <a class="btn">鱼台</a>
              <a class="btn">城阳</a>
              <a class="btn">济阳</a>
              <a class="btn">淄川</a>
              <a class="btn">滕州</a>
              <a class="btn">巨野</a>
              <a class="btn">单县</a>
              <a class="btn">郯城</a>
              <a class="btn">嘉祥</a>
              <a class="btn">兰陵</a>
              <a class="btn">寿光</a>
              <a class="btn">青州</a>
              <a class="btn">胶州</a>
              <a class="btn">黄岛</a>
              <a class="btn">岚山</a>
            </div>
          </div>
          <div id="food-order-wrapper" class='mui-scroll-wrapper swiper-no-swiping'>
          <div class ='mui-scroll'>
           
            <div class="food-line">              <a id="0" class="btn">烧烤第一期</a>              <a id="1" class="btn">烧烤第二期</a>            </div>            <div class="food-line">              <a id="2" class="btn">龙虾第一期</a>              <a id="3" class="btn">龙虾第二期</a>            </div>            <div class="food-line">              <a id="4" class="btn">海鲜第一期</a>              <a id="5" class="btn">海鲜第二期</a>            </div>                          <div class="food-line">            	<button class="btn" onclick="closeFoodOrderWrapper()">返回</button>            </div>
           </div>                
          </div>
          <div id="food-foot-wrapper" onclick="linkTo(100)"></div>
        </div>
        <!-- 活动说明 -->
        <div class="swiper-slide result" id="result-10">
          <div id="rule-title-wrapper">
            <div class="rank-btns-wrapper">
              <a class="btn" onclick="jumpToSwipe(4)">健康达人</a>
              <a class="btn" onclick="jumpToSwipe(5)">齐鲁美食</a>
              <a class="btn active">活动说明</a>
             </div>                       
          </div>
          <!-- 可滚动区域 -->
          <div id="rules-wrapper" class='mui-scroll-wrapper swiper-no-swiping'>
              <div class = 'mui-scroll'>
                <div id="rule-1-wrapper"></div>
                <div id="rule-2-wrapper"></div>
                <div id="rule-3-wrapper"></div>
                <div id="rule-4-wrapper"></div>
              </div>
          </div> 
          <div id="rule-foot-wrapper"></div>
        </div>  
      </div>
    </div>
    <!-- Error Toast -->
    <div id="err-toast" style="display:none;">
      <div class="weui_mask_transparent"></div>
      <div class="weui_toast">
        <i class="weui_icon_warn"></i>
        <p class="weui_toast_content" id="err-toast-content">错误</p>
      </div>
    </div>
    <!-- Success Toast -->
    <div id="success-toast" style="display:none;">
      <div class="weui_mask_transparent"></div>
      <div class="weui_toast">
        <i class="weui_icon_toast"></i>
        <p class="weui_toast_content" id="success-toast-content">成功</p>
      </div>
    </div>
    <script type="text/javascript">
    
    </script>
  </body>
</html>